<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            table {
                border-collapse: collapse;
            }

            td {
                border: 2px solid black;
                padding: 5px 10px;
            }

            td:hover {
                border-color: yellow;
                color: white;
                background: blue;
                font-size: 20px;
            }

        </style>
    </head>
    <body>

    </body>
</html>
<script>
    

    function func() {
        document.write("<table>");

        for (var j = 1; j <= 9; j++) {
            document.write("<tr>");

            for (var i = 1; i <= j; i++) {
                document.write("<td>");
                document.write(i + " * " + j + " = " + i * j);
                document.write("</td>");
            }

            document.write("</tr>");

        }

        document.write("</table>");
    }

    func();
    func();





</script>